<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2022/6/11
  Time: 9:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>我的购物车</title>
    <link href="/Web_css/Shopping_cart.css" rel="stylesheet" type="text/css"/>
    <script src="/Web_page/JQuery.min.js"></script>
    <script src="/Web_js/Shopping_cart.js" language="JavaScript" type="text/javascript"></script>
    <script src="/Web_page/Vue.js"></script>
    <script src="/Web_oop/Oop.js"></script>
</head>
<body>
<div class="body">
    <div class="function">
        <div class="function_Protect">
            <div class="Title">
                <div class="logo">
                    <img src="/Web_img/xiaomi_logo.png">
                </div>
                <div class="function_Title">
                    <h1>我的购物车</h1>
                </div>
                <div class="function_Hint">
                    <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
                </div>
            </div>
            <div class="other_Function">
                <ul class="block">
                    <li class="username options"><a href="">${ueserName}<img src="/Web_img/Shopping_cart_2.png" class="options_Img"></a></li>
                    <li><span class="fill_Entity">|</span></li>
                    <li class="options"><a href="">我的订单</a></li>
                </ul>
                <div class="more" style="z-index: 3;position: absolute">
                    <ul>
                        <a href="" style="margin-top: 10px;width: 100px;display: inline-block;"><li>个人中心</li></a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="center_Shopping">
        <form>
            <div class="shopping_cat">
                <div class="product_Information">
                    <div class="product_Title product_Choose">
                        <input type="checkbox" name="running" checked class="choose_Product" checked_judge="true"><span>全选</span>
                    </div>
                    <div class="product_Title commodity_Name">
                        <span>商品姓名</span>
                    </div>
                    <div class="product_Title commodity_Price">
                        <span>单价</span>
                    </div>
                    <div class="product_Title commodity_Quantity">
                        <span>数量</span>
                    </div>
                    <div class="product_Title commodity_Subtotal">
                        <span>小计</span>
                    </div>
                    <div class="product_Title commodity_Operate">
                        <span>操作</span>
                    </div>
                </div>
                <c:forEach var="i" begin="1" end="${size-1}" step="1">
                    <div class="new_Commodity" add="${i}">
                        <div class="commodityId" style="display: none"></div>
                        <div class="product_Choose">
                            <input type="checkbox" name="running" checked class="new_Product" boolean="true" add="${i}" >
                        </div>
                        <div class="new_Img">
                            <img src="/Web_img/Xiaomi_cell_phone1.png" class="commodityimg">
                        </div>
                        <div class="new_Name">
                            <span class="commodityName">${commodityimg+i}</span>
                        </div>
                        <div class="unit_Price">
                            <span class="commodityprice">1999.9元</span>
                        </div>
                        <div class="quantity">
                            <div class="new_Quantity">
                                <div class="new_Reduce new_Border" add="${i}"><img src="/Web_img/-.png"></div>
                                <input class="number" type="text" value="1">
                                <div class="New_Add new_Border" add="${i}"><img src="/Web_img/+.png"></div>
                            </div>
                            <p class="quantity_Hint"></p>
                        </div>
                        <div class="subtotal">
                            <span style="color: #FF6700;"><a class="subtotal_Quantity">1999.9</a>元</span>
                        </div>
                        <div class="delete">
                            <img src="/Web_img/×.png" class="delete_Img" add="${i}">
                        </div>
                    </div>
                </c:forEach>

                <%
                    StringBuffer img = new StringBuffer();
                    StringBuffer name = new StringBuffer();
                    StringBuffer price = new StringBuffer();
                    StringBuffer damount = new StringBuffer();
                    StringBuffer id = new StringBuffer();

                    String strsize = String.valueOf(request.getAttribute("size"));
                    int size = Integer.parseInt(strsize);
                    for (int i = 1; i < size; i++) {
                        img.append(","+request.getAttribute("commodityimg"+i));
                        name.append(","+request.getAttribute("commodityName"+i));
                        price.append(","+request.getAttribute("commodityprice"+i));
                        damount.append(","+request.getAttribute("commoditydamount"+i));
                        id.append(","+request.getAttribute("commodityId"+i));
                    }
                    request.setAttribute("id",id);
                    request.setAttribute("img",img);
                    request.setAttribute("name",name);
                    request.setAttribute("price",price);
                    request.setAttribute("damount",damount);
                %>
            </div>
        </form>
        <div class="price_Calculation">
            <div class="number_pieces">
                <ul>
                    <li style="width: 70px"><a href="/Front/page" class="front">继续购物</a></li>
                    <li><div class="total_Fill"></div></li>
                    <li style="width: 100px"><a>已经选择<span class="total_Number"></span>件</a></li>
                </ul>
            </div>
            <div class="total_Cost">
                <a>合计:
                    <span class="total_Price"></span>
                    元
                </a>
            </div>
            <div class="settlement">
                <a class="settlement_Price">去结算</a>
            </div>
        </div>

        <div class="commodity_Title">
            <div class="shopping_Title">
                <a>买购物车中商品的人还买了</a>
            </div>
        </div>


        <c:forEach var="j" begin="1" end="2" step="1">
            <div class="commodity_shopping${j}">
                <c:forEach var="i" begin="1" end="5" step="1">
                    <div class="id" style="display: none">

                    </div>
                    <div class="commodity" add="${i}">
                        <div class="commodity_Img">
                            <img src="/Web_img/Xiaomi_Pillow.jpg" class="img">
                        </div>
                        <div class="shopping_Name">
                            <a class="product_name">8H释压舒弹纤维枕 抗菌对装</a>
                        </div>
                        <div class="shopping_Price">
                            <a class="product_price">99.9元</a>
                        </div>
                        <div class="good_Reviews">
                            <a>9${j}.${i}万人好评</a>
                        </div>
                        <div class="whether_join">
                            <a class="add_Shopping" add="${i}" href="">加入购物车</a>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </c:forEach>
    </div>

    <jsp:include page="footer.jsp" flush="true"></jsp:include>
    <script>
        var other_Bottom = document.getElementsByClassName("other_Bottom")
        other_Bottom[0].style.marginTop = "350px"
    </script>

<!-- 隐藏部分 -->
<div class="hint" style="display: none">
    <div class="blinded">
    </div>
    <div class="hint_Text">
        <div class="hint_Character">
            <div class="remove">
                <img src="/Web_img/×.png" class="remove_Img">
            </div>
            <h1 class="hint_Word">-请重新操作-</h1>
            <div class="delete_Button">
                <div class="button">确定</div>
            </div>
        </div>
    </div>
</div>

<!-- 隐藏部分 -->
<div class="hint_Remove" style="display: none" >
    <div class="blinded">
    </div>
    <div class="remove_Text">
        <div class="remove_Character">
            <div class="remove">
                <img src="/Web_img/×.png" class="remove_Img">
            </div>
            <h1 class="remove_Word">确认删除所选商品吗？</h1>
            <div class="delete_Button">
                <div class="remove_Button">确定</div><div class="cancel" style="margin-left: 20px;">取消</div>
            </div>
        </div>
    </div>
</div>
        <%
    String length = String.valueOf(request.getAttribute("length"));
    String numbering = "commodity";
    StringBuffer all = new StringBuffer();
    for (int i = 0; i < Integer.parseInt(length); i++) {
      all.append("|"+request.getAttribute(numbering+i));
    }
    request.setAttribute("all",all);
  %>
    <script>
        var img = "${img}".split(",");
        var price = "${price}".split(",");
        var damount = "${damount}".split(",");
        var commodityId = document.getElementsByClassName("commodityId");
        var commodityimg = document.getElementsByClassName("commodityimg");
        var commodityName = document.getElementsByClassName("commodityName");
        var commodityprice = document.getElementsByClassName("commodityprice");
        var commodityId = document.getElementsByClassName("commodityId")
        var number = document.getElementsByClassName("number")
        for (let i = 1; i < commodityimg.length+1; i++) {
            commodityimg[i-1].src = img[i]
            commodityName[i-1].innerText = "${name}".split(",")[i]
            commodityprice[i-1].innerText = "${price}".split(",")[i]
            number[i-1].value = damount[i]
            commodityId[i-1].innerText = "${id}".split(",")[i];
            number[i-1].setAttribute("value",damount[i])
        }


        var all = "${all}"
        var bars = all.split("|");
        var titles = 0;
        var img = document.getElementsByClassName("img");
        var product_name = document.getElementsByClassName("product_name")
        var product_price = document.getElementsByClassName("product_price")
        var id = document.getElementsByClassName("id")
        for (let i = 1; i < img.length+1; i++) {
            if (bars[i] != undefined) {
                var data = bars[i].split(",");
                id[i-1].innerText = data[10];
                img[i-1].src = data[4];
                product_name[i-1].innerText = data[1];
                product_price[i-1].innerText = data[3];
            }
        }
    </script>

</body>
</html>
